<template>
	<view class="container">
		<!-- 遮罩层 -->
		<view class="mask" @tap="tapMask">
		</view>
		<!-- 内容区 -->
		<view class="content">
			<view class="row">
				<view class="row2">
					<text class="title">{{ title }}</text>
				</view>
			</view>
			<view class="row">
				<view class="row1">
					<image src="/static/icon/icon-star.png" />
					<text>描述：</text>
				</view>
				<view class="row3-border">
					<input type="text" placeholder-class="placeholder" placeholder="请输入描述" />
				</view>
			</view>
			<view class="row">
				<view class="row1">
					<image src="/static/icon/icon-star.png" />
					<text>年龄：</text>
				</view>
				<view class="row3-border">
					<input type="text" placeholder-class="placeholder" placeholder="请输入年龄" />
				</view>
			</view>
			<view class="row">
				<view class="row2">
					<button type="primary" @tap="submit">提 交</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		
		data() {
			return {
				title: '表单标题'
			}
		},
		onLoad() {

		},
		methods: {
			tapMask() {
				console.log('点击遮罩层');
				this.$emit('update:visible',false);
			},
			submit() {
				uni.showToast({
					title: '提交表单！',
					icon: 'none',
					duration: 2000
				});
				console.log('提交表单1！');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		justify-content: center;
		align-items: center;
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 999;
		top: 0;
		left: 0;

		.mask {
			position: fixed;
			width: 100%;
			height: 100%;
			background-color: rgba(0, 0, 0, 0.5);
			z-index: 10;
		}

		.content {
			position: fixed;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: flex-start;
			width: 70%;
			padding: 30rpx 40rpx;
			z-index: 30;
			border-radius: $uni-border-radius-base;
			box-shadow: $uni-box-shadow;
			background: $uni-bg-color;

			.row {
				display: flex;
				justify-content: center;
				align-items: flex-start;
				flex-direction: column;
				width: 100%;

				title {
					justify-content: center;
				}

				.row1 {
					display: flex;
					justify-content: flex-start;
					align-items: center;
					margin-left: -20rpx;
					padding: 10rpx 0;

					image {
						width: 16rpx;
						height: 16rpx;
					}

					text {
						font-size: $uni-font-size-sm;
						color: $uni-text-color-grey;
					}
				}

				.row2 {
					display: flex;
					justify-content: center;
					align-items: center;
					width: 100%;

					button {
						margin-top: 40rpx;
						width: 100%;
					}

					::v-deep uni-button {
						width: 100%;
					}
				}

				.row3-border {
					width: 100%;
					border: 1px solid #ccc;
					border-radius: $uni-border-radius-base;

					input {
						padding: 10rpx 10rpx;
						margin: 0 0;
					}

					::v-deep .placeholder {
						font-size: $uni-font-size-base;
						color: $uni-text-color-placeholder;
					}

					::v-deep .uni-input-input {
						color: $uni-text-color;
					}
				}


				button {}
			}
		}
	}
</style>
